'use strict';

import React,{PropTypes} from 'react'; 
import {Select,Tab,Tag} from 'qnui';
import { Row, Col } from 'qnui/lib/grid';
import classnames from 'classnames';
import jsonp from 'jsonp';
import './index.scss';
const TabPane = Tab.TabPane;
	
class ZhekouTags extends React.Component {
	  static propTypes = {
		setTag: PropTypes.func.isRequired
	  };
	constructor(props) {
        super(props);
        this.state = {
            words: [{"clazz":"促销","words":"卖家促销"},{"clazz":"促销","words":"优惠促销"},{"clazz":"促销","words":"火热促销"},{"clazz":"促销","words":"促销价"},{"clazz":"促销","words":"店铺促销"},{"clazz":"促销","words":"促销活动"},{"clazz":"促销","words":"疯狂促销"},{"clazz":"促销","words":"活动促销"},{"clazz":"促销","words":"团购促销"},{"clazz":"促销","words":"大促销"},{"clazz":"促销","words":"爆款促销"},{"clazz":"促销","words":"品牌促销"},{"clazz":"促销","words":"促销优惠"},{"clazz":"促销","words":"让利促销"},{"clazz":"促销","words":"火爆促销"},{"clazz":"促销","words":"新店大促销"},{"clazz":"促销","words":"换季促销"},{"clazz":"促销","words":"热卖促销"},{"clazz":"促销","words":"冲冠促销"},{"clazz":"促销","words":"冲量促销"},{"clazz":"时间","words":"节日大促"},{"clazz":"时间","words":"夏季新品"},{"clazz":"时间","words":"春上新"},{"clazz":"时间","words":"生日专享"},{"clazz":"时间","words":"天天团购"},{"clazz":"时间","words":"周周精选"},{"clazz":"时间","words":"国庆大促"},{"clazz":"时间","words":"早买早优惠"},{"clazz":"时间","words":"夏季促销"},{"clazz":"时间","words":"秋冬新品"},{"clazz":"时间","words":"春季新品"},{"clazz":"时间","words":"秋季新品"},{"clazz":"时间","words":"秋装上新"},{"clazz":"时间","words":"年终盛典"},{"clazz":"时间","words":"新品尝鲜"},{"clazz":"时间","words":"新年促销"},{"clazz":"时间","words":"春季促销"},{"clazz":"时间","words":"注册周年庆"},{"clazz":"时间","words":"新店大促"},{"clazz":"时间","words":"新年大促"},{"clazz":"时间","words":"百天好礼"},{"clazz":"时间","words":"中秋大促"},{"clazz":"时间","words":"多买多优惠"},{"clazz":"时间","words":"春夏新品"},{"clazz":"时间","words":"年终促销"},{"clazz":"时间","words":"反季促销"},{"clazz":"时间","words":"冬上新"},{"clazz":"时间","words":"开学季"},{"clazz":"时间","words":"年底大促"},{"clazz":"时间","words":"秋冬上新"},{"clazz":"时间","words":"秋冬新款"},{"clazz":"时间","words":"国庆大放价"},{"clazz":"时间","words":"新品抢购"},{"clazz":"时间","words":"国庆促销"},{"clazz":"时间","words":"秋季上新"},{"clazz":"时间","words":"春季上新"},{"clazz":"时间","words":"夏季热卖"},{"clazz":"时间","words":"夏季新款"},{"clazz":"时间","words":"新品上新"},{"clazz":"时间","words":"夏不为利"},{"clazz":"时间","words":"春季新款"},{"clazz":"时间","words":"冬季新品"},{"clazz":"时间","words":"夏季大促"},{"clazz":"时间","words":"年底促销"},{"clazz":"时间","words":"秋上新"},{"clazz":"时间","words":"春季大促"},{"clazz":"时间","words":"新春大促"},{"clazz":"时间","words":"六一大促"},{"clazz":"时间","words":"年末大促"},{"clazz":"时间","words":"节日促销"},{"clazz":"时间","words":"夏上新"},{"clazz":"时间","words":"秋装新品"},{"clazz":"时间","words":"六一促销"},{"clazz":"时间","words":"周年庆"},{"clazz":"时间","words":"新春促销"},{"clazz":"时间","words":"6月大促"},{"clazz":"时间","words":"劳动节专享"},{"clazz":"时间","words":"春装上新"},{"clazz":"时间","words":"夏季上新"},{"clazz":"时间","words":"周年店庆"},{"clazz":"时间","words":"圣诞狂欢"},{"clazz":"时间","words":"开业促销"},{"clazz":"时间","words":"年终大促销"},{"clazz":"时间","words":"新年快乐"},{"clazz":"优惠","words":"手机享优惠"},{"clazz":"优惠","words":"卖家优惠"},{"clazz":"优惠","words":"巨优惠"},{"clazz":"优惠","words":"优惠活动"},{"clazz":"优惠","words":"专属优惠"},{"clazz":"优惠","words":"品牌钜惠"},{"clazz":"优惠","words":"店铺优惠"},{"clazz":"优惠","words":"购物优惠"},{"clazz":"优惠","words":"优惠多多"},{"clazz":"优惠","words":"新款优惠"},{"clazz":"优惠","words":"超值优惠"},{"clazz":"价格","words":"惊喜价"},{"clazz":"价格","words":"手机优惠价"},{"clazz":"价格","words":"手机专属价"},{"clazz":"价格","words":"手机尊享价"},{"clazz":"价格","words":"第二件半价"},{"clazz":"价格","words":"节日促销价"},{"clazz":"价格","words":"优惠价"},{"clazz":"价格","words":"抢购价"},{"clazz":"价格","words":"活动价"},{"clazz":"价格","words":"大减价"},{"clazz":"价格","words":"无线专属价"},{"clazz":"价格","words":"粉丝专属价"},{"clazz":"价格","words":"心动价"},{"clazz":"价格","words":"粉丝福利价"},{"clazz":"价格","words":"优惠减价"},{"clazz":"价格","words":"上新价"},{"clazz":"价格","words":"降价啦"},{"clazz":"价格","words":"新品抢鲜价"},{"clazz":"价格","words":"年货价"},{"clazz":"价格","words":"惠淘价"},{"clazz":"价格","words":"女神价"},{"clazz":"价格","words":"尝鲜价"},{"clazz":"价格","words":"嘉年华价"},{"clazz":"价格","words":"手淘扫码价"},{"clazz":"价格","words":"提前放价"},{"clazz":"价格","words":"抢新价"},{"clazz":"价格","words":"降价了"},{"clazz":"价格","words":"大促价"},{"clazz":"价格","words":"店庆活动价"},{"clazz":"价格","words":"淘宝女装价"},{"clazz":"其他","words":"好货也疯狂"},{"clazz":"其他","words":"店铺活动"},{"clazz":"其他","words":"积分加钱购"},{"clazz":"其他","words":"粉丝专享"},{"clazz":"其他","words":"感恩回馈"},{"clazz":"其他","words":"疯狂抢购"},{"clazz":"其他","words":"狂欢继续"},{"clazz":"其他","words":"女神新衣"},{"clazz":"其他","words":"全国包邮"},{"clazz":"其他","words":"大促"},{"clazz":"其他","words":"满两件包邮"},{"clazz":"其他","words":"狂欢不止"},{"clazz":"其他","words":"买就减"},{"clazz":"其他","words":"掌柜推荐"},{"clazz":"其他","words":"狂欢大促"},{"clazz":"其他","words":"狂欢返场"},{"clazz":"其他","words":"活动中"},{"clazz":"其他","words":"年货大促"},{"clazz":"其他","words":"回馈客户"},{"clazz":"其他","words":"全民疯抢"}],
			activeTab:"促销",
			searchHits:0
        };
    }
	componentWillMount(){
		//读取客户端缓存新的标签列表
		const ClientSavedTags = JSON.parse(localStorage.getItem("zTags"));
		const ClientTimestemp = localStorage.getItem("zTimestemp");
		const timestemp = Date.parse(new Date());
		if(!ClientSavedTags || timestemp-ClientTimestemp>86400000){
			jsonp(`https://huodong.m.taobao.com/api/data/v2/5fe5e737d3314fa2973297f86f7bff3a.js?file=5fe5e737d3314fa2973297f86f7bff3a.js`,{"param":"fn","timeout":3000,"prefix":"","name":"KW"}, (err, data) => {
				// console.log(err,data);
				if(err){
					return;
				}
				localStorage.setItem("zTags", JSON.stringify(data.keywords));
				localStorage.setItem("zTimestemp", Date.parse(new Date()));
				this.setState({"words":data.keywords});
			});
		}else{
			this.setState({"words":ClientSavedTags});
		}
	}
	componentWillReceiveProps(nextProps){
		if(nextProps.search!=""){
			this.setState({activeTab:"搜索结果"});
		}
	}
	componentDidUpdate(){
		let hit=0;
		let perfectMatch=false;
		this.state.words.map(item => {
			if(this.props.search!="" && item.words.indexOf(this.props.search)>=0){
				hit++;
			}
			if(item.words==this.props.search){
				perfectMatch=true;
			}
		});
		if(this.state.searchHits!=hit){
			this.setState({searchHits:hit})
			this.props.searchResult(hit,perfectMatch);
		}
	}
	tabClick(key){
		this.setState({activeTab:key});
	}
    render() {
		const {className, ...others} = this.props;
        const cls = classnames({
            'overlay-content': true,
            [className]: className,
			"next-menu ":true
        });
		const dataCat=[];
		const dataTab = [];
		if(this.props.search){
			this.state.words.map(item => {
				const selected = (item.words==this.props.curTag);
				if(item.words.indexOf(this.props.search)==-1){
					return;
				}
				if(!dataTab[0]){
					dataTab.push({ tab: "搜索结果", key: "搜索结果", content: [{"word":item.words,"selected":selected}] });
				}else{
					dataTab[0].content.push({"word":item.words,"selected":selected});
				}
			});
		}else{
			this.state.words.map(item => {
				const selected = (item.words==this.props.curTag);
				if(!dataTab[dataCat.indexOf(item.clazz)]){
					dataTab.push({ tab: item.clazz, key: item.clazz, content: [{"word":item.words,"selected":selected}] });
					dataCat.push(item.clazz);
				}else{
					dataTab[dataCat.indexOf(item.clazz)].content.push({"word":item.words,"selected":selected});
				}
			});
		}
		const noWord = (dataTab.length==0)?<p style={{textAlign:"center"}}> 抱歉，没有可用的相关词汇！</p>:"";
        return (
		  <div  className={cls}>
			{noWord}
			<Tab type={"text"} activeKey={this.state.activeTab} >
			{
				dataTab.map(tab => {
					return <TabPane tab={tab.tab} key={tab.key} onClick={this.tabClick.bind(this)}>
							<Row type="wrap"  justify="start"  style={{maxHeight:"400px",overflowY:"auto"}}>
							{tab.content.map((item,key)=>{
								return <Col span="6" key={key}><Tag shape="selectable" type="secondary" selected={item.selected} className="custom-tag" onSelect={this.onSetTagClick.bind(this,item.word)}>{item.word}</Tag></Col>
							})}
							</Row>
						   </TabPane>
				})
			}
			</Tab>
		  </div>
        );
    }
   onSetTagClick(word) {
		this.props.setTag(word);
    }
}
export default ZhekouTags;